import { motion } from 'framer-motion';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';
import { useLanguage } from '@/contexts/LanguageContext';
import { getImageUrl } from '@/lib/utils';

// Company milestones
const milestones = [
  { year: 2015, descriptionKey: 'milestone2015' },
  { year: 2017, descriptionKey: 'milestone2017' },
  { year: 2019, descriptionKey: 'milestone2019' },
  { year: 2021, descriptionKey: 'milestone2021' },
  { year: 2023, descriptionKey: 'milestone2023' }
];

// Team members
const teamMembers = [
  {
    name: 'Alex Johnson',
    roleKey: 'ceo',
    image: getImageUrl("Professional business person portrait", "square")
  },
  {
    name: 'Sarah Chen',
    roleKey: 'cto',
    image: getImageUrl("Professional business person portrait", "square")
  },
  {
    name: 'David Rodriguez',
    roleKey: 'cfo',
    image: getImageUrl("Professional business person portrait", "square")
  },
  {
    name: 'Emma Wilson',
    roleKey: 'cmo',
    image: getImageUrl("Professional business person portrait", "square")
  }
];

export default function About() {
  const { t } = useLanguage();
  
  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      <main className="flex-grow">
        {/* About Hero Section */}
        <section className="relative h-64 md:h-80 flex items-center">
          <div className="absolute inset-0 z-0">
             <img 
              src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=Diverse%20team%20of%20professionals%20collaborating%20in%20modern%20office%20space&sign=21dcb696b50c3b4b30a573a91dfbbcce" 
              alt={t('aboutHeroAlt')} 
              className="w-full h-full object-cover"
            />
             <div className="absolute inset-0 bg-gradient-to-r from-black/50 to-black/20 transition-all duration-500 hover:from-black/40 hover:to-black/10"></div>
          </div>
          
          <div className="container mx-auto px-4 relative z-10">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
            >
              <h1 className="text-3xl md:text-5xl font-bold text-white mb-4">{t('aboutTitle')}</h1>
              <p className="text-lg md:text-xl text-gray-100 max-w-2xl">{t('aboutSubtitle')}</p>
            </motion.div>
          </div>
        </section>
        
        {/* Company Story */}
        <section className="py-16 bg-white">
          <div className="container mx-auto px-4">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
              <motion.div
                initial={{ opacity: 0, x: -30 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8 }}
                viewport={{ once: true }}
              >
                <h2 className="text-3xl font-bold text-gray-900 mb-6">{t('ourStory')}</h2>
                <div className="space-y-4 text-gray-700">
                  <p>{t('storyParagraph1')}</p>
                  <p>{t('storyParagraph2')}</p>
                  <p>{t('storyParagraph3')}</p>
                </div>
                
                <div className="mt-8 flex flex-wrap gap-4">
                  <div className="flex items-center">
                    <i className="fa-solid fa-globe text-blue-600 text-2xl mr-3"></i>
                    <div>
                      <div className="text-2xl font-bold text-gray-900">150+</div>
                      <div className="text-sm text-gray-600">{t('countriesServed')}</div>
                    </div>
                  </div>
                  
                  <div className="flex items-center ml-8">
                    <i className="fa-solid fa-users text-blue-600 text-2xl mr-3"></i>
                    <div>
                      <div className="text-2xl font-bold text-gray-900">50k+</div>
                      <div className="text-sm text-gray-600">{t('happyCustomers')}</div>
                    </div>
                  </div>
                  
                  <div className="flex items-center ml-8">
                    <i className="fa-solid fa-boxes text-blue-600 text-2xl mr-3"></i>
                    <div>
                      <div className="text-2xl font-bold text-gray-900">10k+</div>
                      <div className="text-sm text-gray-600">{t('products')}</div>
                    </div>
                  </div>
                </div>
              </motion.div>
              
              <motion.div
                initial={{ opacity: 0, x: 30 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8, delay: 0.2 }}
                viewport={{ once: true }}
                className="relative"
              >
                <div className="rounded-xl overflow-hidden shadow-2xl">
                  <img 
                    src={getImageUrl("Modern international warehouse with products ready for shipping", "landscape_4_3")} 
                    alt={t('warehouseAlt')}
                    className="w-full h-auto"
                  />
                </div>
                
                <div className="absolute -bottom-6 -left-6 bg-blue-600 text-white p-4 rounded-lg shadow-lg hidden md:block">
                  <div className="text-3xl font-bold">7+</div>
                  <div className="text-sm">{t('yearsExperience')}</div>
                </div>
              </motion.div>
            </div>
          </div>
        </section>
        
        {/* Milestones Timeline */}
        <section className="py-16 bg-gray-50">
          <div className="container mx-auto px-4">
            <div className="text-center mb-16">
              <motion.h2 
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8 }}
                viewport={{ once: true }}
                className="text-3xl font-bold text-gray-900 mb-4"
              >
                {t('ourJourney')}
              </motion.h2>
              <motion.p 
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.2 }}
                viewport={{ once: true }}
                className="text-gray-600 max-w-2xl mx-auto"
              >
                {t('journeySubtitle')}
              </motion.p>
            </div>
            
            <div className="relative max-w-4xl mx-auto">
              {/* Timeline Line */}
              <div className="absolute left-0 md:left-1/2 top-0 bottom-0 w-0.5 bg-blue-200 transform md:translate-x-px"></div>
              
              {/* Timeline Items */}
              <div className="space-y-8 md:space-y-16">
                {milestones.map((milestone, index) => (
                  <motion.div
                    key={milestone.year}
                    initial={{ opacity: 0, x: index % 2 === 0 ? -30 : 30 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    transition={{ duration: 0.5, delay: index * 0.1 }}
                    viewport={{ once: true }}
                    className={`relative flex flex-col md:flex-row items-center ${index % 2 === 0 ? 'md:flex-row-reverse' : ''}`}
                  >
                    <div className="md:w-1/2 md:pr-12 md:text-right mb-6 md:mb-0">
                      <h3 className="text-xl font-bold text-gray-900 mb-2">{milestone.year}</h3>
                      <p className="text-gray-600">{t(milestone.descriptionKey)}</p>
                    </div>
                    
                    <div className="z-10 w-8 h-8 rounded-full bg-blue-600 border-4 border-white shadow-md"></div>
                    
                    <div className="md:w-1/2 md:pl-12 hidden md:block"></div>
                  </motion.div>
                ))}
              </div>
            </div>
          </div>
        </section>
        
        {/* Team Section */}
        <section className="py-16 bg-white">
          <div className="container mx-auto px-4">
            <div className="text-center mb-16">
              <motion.h2 
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8 }}
                viewport={{ once: true }}
                className="text-3xl font-bold text-gray-900 mb-4"
              >
                {t('ourTeam')}
              </motion.h2>
              <motion.p 
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.2 }}
                viewport={{ once: true }}
                className="text-gray-600 max-w-2xl mx-auto"
              >
                {t('teamSubtitle')}
              </motion.p>
            </div>
            
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
              {teamMembers.map((member, index) => (
                <motion.div
                  key={member.name}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  whileHover={{ y: -5 }}
                  className="group"
                >
                  <div className="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300">
                      <div className="relative overflow-hidden aspect-square">
                       <img 
                         src={`https://picsum.photos/id/${[1005, 1011, 1025, 1027][index]}/400/400`} 
                        alt={member.name}
                        className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                      />
                    </div>
                    
                    <div className="p-4 text-center">
                      <h3 className="font-semibold text-lg text-gray-800 mb-1">{member.name}</h3>
                      <p className="text-blue-600 text-sm mb-3">{t(member.roleKey)}</p>
                      <div className="flex justify-center space-x-3 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                        <a href="#" className="hover:text-blue-600 transition-colors" aria-label="LinkedIn">
                          <i className="fa-brands fa-linkedin"></i>
                        </a>
                        <a href="#" className="hover:text-blue-600 transition-colors" aria-label="Twitter">
                          <i className="fa-brands fa-twitter"></i>
                        </a>
                        <a href="#" className="hover:text-blue-600 transition-colors" aria-label="Email">
                          <i className="fa-solid fa-envelope"></i>
                        </a>
                      </div>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}